<template>
	<view class="bg-light" style="height: 100%;">
		<tabsTop tabName="购物车"></tabsTop>
		<gwTitle title="合美供销云平台">
			<view class="pr-2" @click="handleEdit()">{{isEdit?'完成':'编辑'}}</view>
		</gwTitle>
		<!-- 购物车 -->
		<scroll-view scroll-y="true" class="w-100" :style="'height:calc(100vh - 340rpx) '">
			<!-- 商品 -->
			<view class="py-2">
				<view v-for="(item,index) in ShopCar" :key="index"
					class="mx-2 mb-2 py-2 flex align-center bg-white rounded-lg">
					<view class="mx-2 flex-shrink">
						<uni-icons @click="handleSelect(item)" v-if="!item.isSelect" type="circle" color="#28a745"
							size="20"></uni-icons>
						<uni-icons @click="handleSelect(item)" v-else type="checkbox-filled" color="#28a745"
							size="20"></uni-icons>
					</view>
					<view class="mr-2 w-100">
						<view class="flex">
							<view class="flex-shrink rounded overflow-hidden" style="width: 180rpx; height: 180rpx;">
								<image :src="Domain_IMG+item.Picture_URL" class="img" mode=""></image>
							</view>
							<view class="ml-2 flex flex-column justify-between w-100">
								<text>{{item.Article_Name}}</text>
								<view class="flex justify-between">
									<money :money="item.Amount"></money>
									<counter @Count="handleCount($event,index)" :num="item.Quantity"></counter>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部操作 -->
		<view class="fixed-bottom shadow flex align-center bg-white" style="height: 110rpx;">
			<!-- 按钮 -->
			<view class="ml-2 flex-shrink flex align-center ">
				<view @click="handleTotalSelect()" class="mr-2 flex-shrink">
					<uni-icons v-if="!isSelect" type="circle" color="#28a745" size="20"></uni-icons>
					<uni-icons v-else type="checkbox-filled" color="#28a745" size="20"></uni-icons>
				</view>
				<text class="font">全选</text>
			</view>
			<!-- 计算 -->
			<view v-if="!isEdit" class="w-100 flex justify-end mr-2">
				<!-- 费用 -->
				<view class="flex flex-column">
					<!-- 合计 -->
					<view class="flex justify-end align-end" style="height: 50%;">
						<text class="font-sm text-muted">不含运费</text>
						<text class="ml-2 font">合计：</text>
						<money :money="totalPrice"></money>
					</view>
					<!-- 优惠 -->
					<view class="flex align-center" style="height: 50%;">
						<text class="font-sm text-muted">共优惠：￥0.00</text>
						<view class="ml-1 px-1 bg-hover-light rounded-circle flex align-center justify-center">
							<text class="font-sm">优惠明细</text>
							<uni-icons type="up" size="12"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view @click="settlement(SelectShopCar)"
					class="ml-2 bg-success px-4 py-2 flex align-center rounded-circle">
					<text class="text-white font">去结算</text>
				</view>
			</view>
			<view v-else class="w-100 flex justify-end mr-2">
				<!-- 按钮 -->
				<view @click="Delete()" class="ml-2 bg-hover-light px-4 py-2 flex align-center rounded-circle">
					<text class="text-muted font">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import gwTitle from "@/components/gwtitle/gwTitle.vue"
	import money from "@/components/tool/money.vue";
	import counter from "@/components/tool/counter.vue";
	import {
		DeleteShopCarQuantity,
		getShopCarAll
	} from "@/api/article.js"
	import {
		accMul,
		accAdd,
		accSub
	} from "@/static/js/GeneralUtil.js"
	export default {
		components: { //轮播图组件
			tabsTop, //顶部导航栏
			gwTitle, //顶部跳转
			money, //钱样式
			counter, //计数器
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG, //图片地址
				isEdit: false, //编辑
				ShopCar: [], //购物车中商品
				isSelect: true, //全选
				DeleteShopCar: [], //被选择删除
				SelectShopCar: [], //被选中提交
				totalPrice: 0,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			async getWXShopCarQuantity() {

			},
			handleEdit() {
				this.isEdit = !this.isEdit
				if (this.isEdit) {
					this.ShopCar.forEach(item => {
						item.isSelect = false
					})
					this.isSelect=false;
				} else {
					this.DeleteShopCar = []; //清空删除
				}
			},
			handleCount(e, index) { //计算数量
				console.log(1);
				this.ShopCar[index].Quantity = e;
				this.ShopCar[index].Amount = accMul(e, this.ShopCar[index].Sales_Unit_Price)
				this.getTotalPrice();
			},
			handleSelect(item) { //选中商品
				item.isSelect = !item.isSelect
				//判断是否全部选中
				if (this.ShopCar.some(item => !item.isSelect)) {
					this.isSelect = false
				} else {
					this.isSelect = true
				}
				if (!this.isEdit) { //选中
					if (item.isSelect) {
						this.SelectShopCar.push(item)
					} else {
						this.SelectShopCar = this.SelectShopCar.filter(i => i.Sales_Order_SerialNumber != item
							.Sales_Order_SerialNumber)
					}
				} else { //删除	
					if (item.isSelect) {
						this.DeleteShopCar.push(item.Sales_Order_SerialNumber)
					} else {
						this.DeleteShopCar = this.DeleteShopCar.filter(i => i != item.Sales_Order_SerialNumber)
					}
				}
				this.getTotalPrice();
			},
			getTotalPrice() {
				this.totalPrice = 0
				for (var i = 0; i < this.SelectShopCar.length; i++) {
					this.totalPrice = accAdd(this.SelectShopCar[i].Amount, this.totalPrice)
				}
			},
			handleTotalSelect() {
				this.isSelect = !this.isSelect
				if (!this.isEdit) { //下单
					if (this.isSelect) { //全部选中
						this.ShopCar.forEach(item => {
							item.isSelect = true;
							this.SelectShopCar.push(item)
						})
					} else { //全部取消
						this.ShopCar.forEach(item => {
							item.isSelect = false;
						})
						this.SelectShopCar = []
					}
				} else { //删除
					if (this.isSelect) { //全部选中
						this.ShopCar.forEach(item => {
							item.isSelect = true;
							this.DeleteShopCar.push(item.Sales_Order_SerialNumber)
						})
					} else { //全部取消
						this.ShopCar.forEach(item => {
							item.isSelect = false;
						})
						this.DeleteShopCar = []
					}
				}
				this.getTotalPrice();
			},
			settlement(SelectShopCar) {
				var selectShopCar = encodeURIComponent(JSON.stringify(SelectShopCar))
				uni.navigateTo({
					url: '/pages/shopCart/submitOrder?SelectShopCar=' + selectShopCar + '&totalPrice=' + this
						.totalPrice
				})
			},
			async getData() {
				const res = await getShopCarAll({
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber
				})
				if (res.length > 0) {
					this.ShopCar = res
					this.SelectShopCar = res
				}
				for (var i = 0; i < this.ShopCar.length; i++) {
					this.ShopCar[i].isSelect = true;
					this.totalPrice = accAdd(this.SelectShopCar[i].Amount, this.totalPrice)
				}
			},
			async Delete() { //购物车批量删除
			uni.showLoading({
				title: "加载中...",
			});
			this.loading = true;
			await DeleteShopCarQuantity({
				Open_ID: app.globalData.Open_ID,
				Sales_Order_SerialNumber: JSON.stringify(this.DeleteShopCar)
			})
			this.ShopCar=[]
			if(this.ShopCar.length==0){
				uni.hideLoading();
				uni.showToast({
					title: '删除成功！',
					icon: 'success'
				})
				this.loading = false;
			}
			}
		}
	}
</script>

<style lang="scss">

</style>